<template>
	<div class="permissions">
		<list-title :data="header"></list-title>
		<div class="set-per">
			<div class="menu">
				
				<div class="labelname"><b>选择权限：</b></div>
				<div class="list">
					<el-tree
					:data="acMenuList"
					show-checkbox
					node-key="id"
					:check-strictly="false"
					:default-expand-all="true"
					:expand-on-click-node="false"
					:default-checked-keys=permissionList
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(255, 255, 255, 0.92)"
					ref="tree">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label.name }}</span>
						</span>
					</el-tree>
				</div>
			</div>
			<div class="role">
				<b>角色名称</b>：{{ $route.query.name }}<br><br>
				<el-button type='primary' size="mini" @click="save()">保存设置</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '权限设置',
				reload: true,
			},
			acMenuList: [],//认证菜单
			permissionList: [],//旧的权限数据
			loading: true,
			hasAPP: true
		};
	},
	components: {
		ListTitle,
	},
	created: function() {
		this.getMenuList();
	},
	methods: {
		/*获取菜单*/
		getMenuList: function(){
			this.$baseURL(this.$domain.ac)
			this.$get(this.$api.menuList, {
				// 'parentid': 0,
				'type': 'ele',
				// 'display': 0,
			}).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					this.acMenuList = []
					this.permissionList = []
					Object.keys(res.data.data).forEach((k) => {
						// console.log(res.data.data[k].app_info_id)
						this.acMenuList.push(
							res.data.data[k]
						)
					})

					/*取出权限数据*/
					this.getPermissions();

					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {
				this.loading = false
			}) 
		},
		/*获取此角色的权限数据*/
		getPermissions: function(){
			this.$baseURL(this.$domain.ac)
			this.$get(this.$api.setPermissions, {
				role_id: this.$route.query.id,
			}).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					this.permissionList = []
					Object.keys(res.data.data).forEach((k) => {
						if(res.data.data[k].half == 1){
							this.permissionList.push(res.data.data[k].mid)
						}
					})

					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {
				this.loading = false
			}) 
		},
		/*保存设置*/
		save: function(){
			let res = this.$refs.tree.getCheckedNodes()//半选的节点
			let resHalf = this.$refs.tree.getHalfCheckedNodes()//选中的节点
			let arr = []
			res.forEach((item) => {
				arr[item.id] = 1
			})
			resHalf.forEach((item) => {
				arr[item.id] = 0
			})


			if(arr.length){
				this.$baseURL(this.$domain.ac)
				this.$post(this.$api.setPermissions, {
					role_id: this.$route.query.id,
					data: arr
				}).then(res => {
					// console.log(res);
					/*成功*/
					if(res.data.code == 0){
						// console.log(res.data)
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.modifyAvatarLock = false;
				});
			}else{
				this.$message({
					showClose: true,
					message: "没有选择权限",
					type: 'error'
				});
			}
		},
	},
	computed: {
		
	}
};
</script>

<style lang="stylus" scoped>
.permissions
	position: relative
	height: 100%
	.instance
		position: absolute
		top: 0px
		left: 100px
		/deep/ .el-input__inner
			border: none !important
	.set-per
		display: flex
		margin-top: 20px
		height: calc(100% - 56px)
		// background: red
		.role, .menu
			padding: 20px
		.role
			// border: red solid 1px
			width: 350px
		.menu
			flex: 1
			height: 100%
			// border: green solid 1px
			display: flex
			.labelname
				width: 100px
				// border: red solid 1px
			.list
				flex: 1
				border: #ccc solid 1px
				padding: 20px 20px
				height: 100%
				overflow: auto
	.el-tree
		/deep/ .el-tree-node__content
			padding: 18px 0
			border-bottom: 1px solid #e9ecf4
		.custom-tree-node
			flex: 1
			display: flex
			align-items: center
			justify-content: space-between
			font-size: 12px
			.content
				span
					width: 100px
					display: inline-block
					margin-right: 5px
					// border: 1px solid red
				span:last-child
					margin-right: 0
					.el-button--small
						padding: 0
				span.icon-sort-up,span.icon-sort-down
					width: 16px
					margin-right: 0px
					color: $theme-color
</style>